<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>观察者</title>
</head>
<body>
  <script>
      // 发布者-目标
      class Dep {
          constructor() {
              // 记录所有的订阅者
              this.subs = []
          }

          // 添加订阅者
          addSub(sub) {
              if(sub && sub.update) {
                  this.subs.push(sub)
              }
          }

          // 发布通知 当事件发生的时候 通知所有的订阅者 调用所有订阅者的update方法
          notify() {
              this.subs.forEach(sub => {
                  sub.update()
              })
          }
      }

      // 观察者-订阅者
      class Watcher {
          // 发布者调用该方法 实现视图的更新等一系列操作
          update() {
              console.log('update')
          }
      }

      // 测试
      let dep = new Dep()
      let watcher = new Watcher()

      dep.addSub(watcher)

      dep.notify()
  </script>
</body>
</html>